
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />   

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" src="http://demo.connecticinc.com/hackday/atmosJS/2.0.0-crypto-sha1.js"></script>
<script type="text/javascript" src="http://demo.connecticinc.com/hackday/atmosJS/2.0.0-hmac-min.js"></script>
<script type="text/javascript" src="http://demo.connecticinc.com/hackday/atmosJS/atmos.js"></script>

<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<script type="text/javascript" src="uploader.js"></script>
<script type="text/javascript">
window.addEventListener("load", function() {
	var atmos = new AtmosRest("D7qsp4j16PBHWSiUbc/bt3lbPBY=","connectic");
	var mimetype = "image/jpg";
	var filename = "/js_upload_img.jpg";

	var updater = function () {
		console.log(filename + "\t filename");
        	 atmos.update(filename,input.files[0].getAsDataURL(), mimetype, { onSuccess : update_good });
	      }; 
	var update_good = function () {
		alert("updated Atmos!");
	};
    var input = document.getElementById("photo");
    var img = document.getElementById("img");
    var previewBtn = document.getElementById("preview");
    previewBtn.addEventListener("click", function() {
	atmos.create(filename,mimetype, {onSuccess: updater, onFailure :updater});
	console.log("finished create function");
        img.src = input.files[0].getAsDataURL();
    }, false);

    // handle file upload
    var form = document.getElementsByTagName("form")[0];
    var uploader = new Uploader(form);
    var uploadBtn = document.getElementById("upload");
    uploadBtn.addEventListener("click", function() {
        uploader.send();
    }, false);

}, false);
</script>
</head>
<body>

<form action="upload.php" method="post"
      enctype="multipart/form-data" onsubmit="return false;">
    <fieldset>
        <legend>Upload photo</legend>
        <label for="image_name">Image name:</label>
        <input type="text" name="image_name" id="image_name"> |
        <label for="image_type">Image type:</label>
        <select name="image_type" id="image_type">
            <option>JPEG</option>
            <option>PNG</option>
            <option>GIF</option>
        </select> |
        <input type="file" name="photo" id="photo">
        <input type="submit" value="Upload" id="upload">
        <input type="submit" value="Preview" id="preview">
<hr>
        <img src="" alt="image preview" id="img">
    </fieldset>
</form>

</body>
</html>
